<template>
	<view class="container">
		<!-- <uni-nav-bar 
		fixed="true" 
		color="#ffffff" 
		:border="false"
		background-color="linear-gradient(-90deg, #ED602B, #F19136)" 
		:status-bar="true" 
		title=" "  /> -->
		<view class="shop-page-bar">
			<view class="shop-page-bar-top" :style="{ height: barHeight + 'px' }"></view>
			<top-bg :height="165">
				<!-- <view class="logo">魔利购<text class="en">MJHLH.COM</text></view> -->
				<image class="logo" src="/static/mlh_logo.png" mode=""></image>
			</top-bg>
		</view>
		<view class="content">
			<view class="user-wrapper">
				<image class="avatar" v-if="memberInfo.logo" :src="memberInfo.logo" mode="aspectFill"></image>
				<image class="avatar" v-else src="/static/avatar.jpg" mode="aspectFill"></image>
				<view class="text">
					<view class="name ell" v-if="memberInfo.nickName">{{memberInfo.nickName}}</view>
					<view class="integral" v-if="memberInfo.score">可用积分 {{memberInfo.score}}</view>
				</view>
				<view class="shop-btn" @click="integral">积分商城</view>
			</view>
			<view class="nav-wrapper">
				<view class="nav-item" @click="specialPriceMall">
					<view class="title">私密商城</view>
					<view class="desc">在线下单 同城派送</view>
					<image class="icon" src="/static/tjsc.png" mode="widthFix"></image>
				</view>
				<view class="nav-item" @click="map">
					<view class="title">查找商家</view>
					<view class="desc">找到你需要的商家</view>
					<image class="icon" src="/static/fjsh.png" mode="widthFix"></image>
				</view>
			</view>
			<swiper class="swiper" autoplay="autoplay" interval="5000" duration="400" v-if="bannerList.length">
				<swiper-item v-for="(banner, index) in bannerList" :key="index">
					<image class="img" :src="banner.image" @click="toLink(banner.link)" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
			<!-- id: 68
				image: "http://molihe.oss-cn-beijing.aliyuncs.com/http://molihe.oss-cn-beijing.aliyuncs.com/default/e2c992617b7bc998f8ffd362f2633d2ab4a74b7d#w=1024#h=1024"
				introduce: "好吧"
				name: "测试用的电视机"
				normal: "44寸"
				price: "23.00"
				score: 0
				store: 100
				 -->
			<view class="list-wrapper" v-if="superMarketList.length > 0 ">
				<view class="titleItem" @click="specialPriceMall">
					<view class="left" >私密爆款抢购</view>
					<view class="right" >商品更多选择+</view>
					
				</view>
				<view class="list">
					<!-- <view class="item" v-for="shop in shopList" @click="shopDetails(shop.id)" :key="shop.id"> -->
					<view class="item item-hot" v-for="shop in superMarketList" @click="superMarketClick(shop.id)" :key="shop.id">
						<image class="icon" :src="shop.image"></image>
						<view class="text">
							<view class="name ell">{{shop.name}}</view>
							<view class="desc ell">{{shop.introduce}}</view>
							<view class="price"><text v-if="shop.price"><text
										class="small">¥</text>{{shop.price}}</text><text class="medium"
									v-if="shop.score">+ {{shop.score}}积分</text></view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="list-wrapper" v-if="productList.length > 0">
				<view class="title">超市商家精选</view>
				<view class="list">
					<view class="item item-hot" v-for="product in shopList" @click="details(product.id)"
						:key="product.id">
						<image class="icon" :src="product.image"></image>
						<view class="text">
							<view class="name ell">{{product.name}} </view>
							<view class="desc ell">{{product.introduce}}</view>
							<view class="price">
								<text v-if="product.price==0">
									<text class="medium">免费领取</text>
								</text>
								<text v-else>
									<text class="small">¥</text>{{product.price}}</text>
							</view>
							
							
						</view>
					</view>
				</view>
			</view>

			<view class="list-wrapper" v-if="productList.length > 0">
				<view class="title">商家特色服务</view>
				<view class="list">
					<view class="item item-hot" v-for="product in productList" @click="details(product.productId)"
						:key="product.productId">
						<image class="icon" :src="product.productImage"></image>
						<view class="text">
							<view class="name ell">{{product.productName}} </view>
							<view class="desc ell">{{product.shopName}}</view>
					
							<view class="price">
								<text v-if="product.productPrice==0">
									<text class="medium">免费领取</text>
								</text>
								<text v-else>
									<text class="small">¥</text>{{product.productPrice}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>


	<!-- 		<view class="list-wrapper" v-if="storeList.length > 0">
				<view class="title">附近联盟商户</view>
				<view class="list">
					<view class="item" v-for="store in storeList" @click="store(store.id)" :key="store.id">
						<image class="icon" :src="store.image"></image>
						<view class="text">
							<view class="name ell">{{store.name}}</view>
							<view class="desc ell">{{store.distance}}</view>
						</view>
					</view>
				</view>
			</view> -->
		</view>
		<tabBar v-if="loads"></tabBar>
		<view class="tab-bar-place"></view>
<!-- 		<getPhones ref="getPhones" /> -->
	</view>
</template>

<script>
	import getPhones from '@/components/getPhones/index.vue'
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	import tabBar from '@/components/tab-bar/index.vue'
	import topBg from '@/components/top-bg/index.vue'
	import {
		banners
	} from '@/api/other.js'
	import {
		selectShopDistance
	} from '@/api/store.js'
	import {
		nearSpecialProducts,
		frontPage,getSuperMarketList
	} from '@/api/product.js'
	
	
	export default {
		components: {
			uniNavBar,
			tabBar,
			topBg,
			getPhones
		},
		data() {
			return {
				barHeight: 0,
				bannerList: [],
				storeList: [],
				productList: [],
				superMarketList: [],
				shopList: [],
				getLocationSuccess: false,
				pageLoadParam: {
					pageNum: 1,
					pageSize: 8,
					type: 3,
					shopId: undefined,
					isSelected: 1
				},
				loads: false
			}
		},
		computed: {
			memberInfo() {
				return this.$store.getters.userInfo
			}
		},
		onShow() {

			uni.setStorageSync("inTell", "3");
			let that = this
			setTimeout(function() {
				that.loads = true
			}, 50);
			const {
				statusBarHeight
			} = uni.getSystemInfoSync()
			this.barHeight = statusBarHeight + 44
		
			const token = uni.getStorageSync('token'); // 从缓存中获取token

			if (token && this.$store.getters.userInfo.nickName) {
				this.$store.dispatch('user/getUserInfo')
			}
			// this.$nextTick(() => {
			// 	if (token) {
			// 		this.$refs.getPhones.show()
			// 	}
			// })
		},
		onShareAppMessage() {
			let opt = {
				title: '魔利购',
				path: '/pages/index/index'
			}
			return opt;
		},
		onLoad() {
			this.getBanner()
			this.getProducts()
			this.getNearbyInfo();
		},
		methods: {
			// banner
			getBanner() {
				const data = {
					type: 1
				}
				banners(data).then(respanse => {
					this.bannerList = respanse.result
				})
			},

			toLink(url) {
				if (url) {
					uni.navigateTo({
						url: `/pages/webView/index?url=${url}`
					})
				}
			},
			
			getProducts(){
				//超市精选
				getSuperMarketList().then(res =>{
					this.superMarketList = res.result
				})
				
			},
			
			marsTobaidu(mars_point){
				var x_pi=3.14159265358979324 * 3000.0 / 180.0;
			    var baidu_point={longitude:0,latitude:0};
			    var x=mars_point.longitude;
			    var y=mars_point.latitude;
			    var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi);
			    var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi);
			    baidu_point.longitude = z * Math.cos(theta) + 0.0065;
			    baidu_point.latitude = z * Math.sin(theta) + 0.006;
			    return baidu_point;
			},

			getNearbyInfo() {
				const that = this
				uni.getLocation({
					type: 'gcj02',
					isHighAccuracy: true,
					success: function(res) {
						
					//	console.log('定位的经纬度是：'+res.latitude+'*****'+res.longitude)
						
						let obj = that.marsTobaidu(res);
						const {
							latitude,
							longitude
						} = obj
						const param = {
							latitude,
							longitude,
							pageNum: 1,
							pageSize: 4,
							type: 1
						}
						// 特色服务
						const param2 = {
							...param,
							// isSelected: 1,
							type: 4
						}
						nearSpecialProducts(param2).then(respanse => {
							that.productList = respanse.result.rows
							
							if(that.productList.length>0){
								let item = that.productList[0];
								that.pageLoadParam.shopId = item.shopId;
								
								frontPage(that.pageLoadParam).then(respanse => {
									that.shopList = respanse.result.rows
								})
								
							}
						})

					},
					fail: error => {
						console.log("获取定位失败了", error)
						uni.showModal({
							title: '提示',
							content: '获取定位失败，是否授权打开定位',
							success: (res) => {
								if (res.confirm) {
									uni.openSetting({
										success(res) {
											console.log(res.authSetting)
										}
									})
								}else{
									const res={
										latitude:43.886525,
										longitude:125.301087
									} 
									const param = {
										latitude:43.886525,
										longitude:125.301087,
										pageNum: 1,
										pageSize: 6,
										type: 1
									}
									const param2 = {
										...param,
										// isSelected: 1,
										type: 4
									}
									nearSpecialProducts(param2).then(respanse => {
										that.productList = respanse.result.rows
										
										if(that.productList.length>0){
											let item = that.productList[0];
											that.pageLoadParam.shopId = item.shopId;
											
											frontPage(that.pageLoadParam).then(respanse => {
												that.shopList = respanse.result.rows
											})
											
										}
									})
									
								}
							}
						})
					}
				});
			},

			// 商品详情
			details(id) {
				uni.navigateTo({
					url: `/pages/product-details/index?productId=${id}`
				})
			},

			integral() {
				uni.navigateTo({
					url: '/pages/integral/index'
				})
			},

			store(id) {
				uni.navigateTo({
					url: `/pages/store/index?shopId=${id}`
				})
			},

			shopDetails(id) {
				uni.navigateTo({
					url: `/pages/product-details/index?productId=${id}`
				})
			},

			specialPriceMall() {
				uni.navigateTo({
					url: '/pages/special-price-mall/index'
				})
			},
			
		
			superMarketClick(id) {
				uni.navigateTo({
				    url: `/pages/product-details/index?productId=${id}`
				})
			},

			map() {
				uni.navigateTo({
					url: '/pages/store/map'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 1500rpx;
	}

	.shop-page-bar {
		// position: fixed;
		// top: 0;
		// left: 0;
		// right: 0;
		width: 100%;
		background-image: linear-gradient(-90deg, #ED602B, #F19136);
		border-radius: 0 0 28% 28%;

		.shop-page-bar-top {
			position: sticky;
			top: 0;
			width: 100%;
			min-height: 44px;
			background-image: linear-gradient(-90deg, #ED602B, #F19136);
			z-index: 990;
		}
	}

	.logo {
		width: 580rpx;
		position: absolute;
		left: 33rpx;
		top: 0;
		z-index: 3;
		// color: #fff;
		// line-height: 1;
		// font-weight: bold;
		// font-style: italic;
		// letter-spacing: 18rpx;
		// font-size: 61rpx;
		height: 60rpx;

		.en {
			letter-spacing: 6rpx;
			font-size: 36rpx;
		}
	}

	.user-wrapper {
		position: relative;
		display: flex;
		padding: 30rpx 41rpx 0 29rpx;
		margin: -70rpx 33rpx 0;
		height: 142rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		box-shadow: 0 2rpx 12rpx 0 #EFF0F3;
		border-radius: 10rpx;

		.avatar {
			width: 84rpx;
			height: 84rpx;
			border-radius: 50%;
			background-color: #F5F5F5;
		}

		.text {
			flex: 1;
			margin-left: 19rpx;
			overflow: hidden;



			.name {
				margin-top: 6rpx;
				line-height: 42rpx;
				font-size: 32rpx;
				font-weight: 600;
				color: #040000;
				
			}

			.integral {
				margin-top: 12rpx;
				line-height: 26rpx;
				font-size: 24rpx;
				color: #999999;
			}
		}

		.shop-btn {
			margin-top: 26rpx;
			width: 161rpx;
			height: 55rpx;
			line-height: 55rpx;
			font-size: 24rpx;
			text-align: center;
			font-weight: 600;
			color: #fff;
			background: #ED602B;
			border-radius: 28rpx;
		}
	}

	.nav-wrapper {
		display: flex;
		margin: 20rpx 33rpx 0;
		height: 360rpx;
		background: #FFFFFF;
		border-radius: 10rpx;

		.nav-item {
			position: relative;
			padding-top: 43rpx;
			flex: 1;

			&:first-child::after {
				content: " ";
				position: absolute;
				right: 0;
				top: 39rpx;
				bottom: 40rpx;
				border-right: 1px solid #F2F2F2;
			}

			.title {
				line-height: 46rpx;
				text-align: center;
				font-size: 36rpx;
				font-weight: 600;
				color: #333333;
			}

			.desc {
				margin-top: 8rpx;
				line-height: 32rpx;
				text-align: center;
				font-size: 22rpx;
				font-weight: 600;
				color: #ED602B;
			}

			.icon {
				display: block;
				margin: 32rpx auto 0;
				width: 178rpx;
			}
		}
	}

	.swiper {
		margin: 20rpx 33rpx 0;
		height: 300rpx;

		.img {
			width: 100%;
			height: 300rpx;
		}
	}

	.list-wrapper {
		padding: 40rpx 33rpx 0;
		
		.titleItem{
			width: 100%;
			display: flex;
			
			.left{
				width:50%;
				line-height: 48rpx;
				font-size: 38rpx;
				font-weight: 500;
				color: #333333;
			}
			.right{
				width:50%;
				line-height: 48rpx;
				font-size: 28rpx;
				text-align: right;
				font-weight: 500;
				color: #333333;
			}
		}
		
		

		.title {
			line-height: 48rpx;
			font-size: 38rpx;
			font-weight: 500;
			color: #333333;
		}

		.list {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.item {
				margin-top: 27rpx;
				width: 329rpx;
				height: 436rpx;
				background: #FFFFFF;
				border-radius: 10rpx;
				overflow: hidden;

				.icon {
					display: block;
					width: 100%;
					height: 329rpx;
					background-color: #F5F5F5;
				}

				.text {
					padding: 0 19rpx;

					.price {
						margin-top: 6rpx;
						line-height: 36rpx;
						font-size: 34rpx;
						color: #ED602B;
						text-align:right;
						.small {
							font-size: 18rpx;
						}

						.medium {
							font-size: 28rpx;
						}
					}

					.name {
						margin-top: 8rpx;
						line-height: 44rpx;
						font-size: 30rpx;
						font-weight: 400;
						color: #010101;
						
						.priceTxt {
							margin-right: 0;
							font-size: 30rpx;
							color :#ED602B;
							float: right;
							
							.small{
									font-size: 24rpx;
							}
						}
					}

					.desc {
						margin-top: 6rpx;
						line-height: 28rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
					}
				}
			}

			.item-hot {
				height: 464rpx
			}
		}
	}
</style>
